import { computed } from 'vue'
import { useEditStore } from '@/store'
import { deepClone } from '@/libs/tools'
import { isObject, isArray, isFunction } from '@/libs/is'

// h5端的数据格式
export default function useH5DataFormat() {
    const editStore = useEditStore()
    
    const tabbarData = computed(() => editStore.appData.value?.data?.['tab-bar'] || {})
    const appDatas = computed(() => {
        const data = deepClone(editStore.appData)
        Object.keys(data).forEach(key => {
            const value = data[key]
            if (isObject(value) && value.hasOwnProperty('eles')) {
                value.eles = value.eles.map(item => item.eles)
                forAppWidgets(value.eles, widget => formatWidgetData(widget))
                value.data = value.eles
                delete value.eles
            }
        })
        return data
    })

    // console.log(editStore.appData, appDatas.value)

    // 遍历app控件列表
    function forAppWidgets(widgetList, callback) {
        forWidgets(widgetList)

        function forWidgets(widgets) {
            for (let index = 0; index < widgets.length; index++) {
                const widget = widgets[index]
                // 判断是控件数据
                if (!(widget.hasOwnProperty('id') &&
                    widget.hasOwnProperty('type') &&
                    widget.hasOwnProperty('style') &&
                    widget.hasOwnProperty('customFeature') &&
                    widget.hasOwnProperty('animations')))
                {
                    continue
                }
                if (isFunction(callback)) {
                    callback(widget)
                }
                forWidgetObject(widget)
            }
        }
    
        function forWidgetObject(widget) {
            for (const key of Object.keys(widget)) {
                let value = widget[key]
                if (isObject(value)) {
                    forWidgetObject(value)
                }
                if (isArray(value)) {
                    if (value.some(item => isObject(item) && item.hasOwnProperty('eles'))) {
                        // 去除 eles 属性
                        widget[key] = value.map(item => item.eles)
                        forWidgets(widget[key])
                    } else {
                        forWidgetObject(value)
                    }
                }
            }
        }
    }

    // 格式化单个控件数据
    function formatWidgetData(widget) {
        // console.log('控件', widget)
        widget.style = Object.entries(widget.style).map(([key, value]) => {
            // 如果带有px，先取出其数值部分，再转为rpx值
            if (/(px)$/.test(value)) {
                value = getRpx(value)
            }
            return `${key}:${value}`
        }).join(';')
    }

    /**
     * 用于获取用户传递值的rpx值
     * 如果用户传递了"xxpx"，取出其数值部分
     */
    function getRpx(value, unit = true) {
        const scale = 750/320
        const getNum = val => parseInt(val) * scale
        return unit ? `${getNum(value)}rpx` : getNum(value)
    }

    return {
        appDatas,
        tabbarData
    }
}